<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		*{
			padding:0 ;
			margin: 0;
		}
		#box{
			width: 500px;	
			height: 500px;
			position: relative;
			border: 1px solid red;
			margin: 0 auto;
		}
		#box p,#box #center{
			width: 80px;
			height: 80px;
			background: red;
			position: absolute;
			top: 50%;left: 50%;
			margin-left: -40px;
			margin-top: -40px;
			line-height: 80px;
			text-align: center;
			border-radius:50% ;
			cursor: pointer;
		}
		/*让中心转*/
		#box #center{
			transition: all 2s;
		}
		#center:hover{transform: rotate(1080deg);}
		#box p:nth-of-type(1){
			
		}
		/*颜色*/
		#box p:nth-of-type(1){
			background: darkorange;
		}
		#box p:nth-of-type(2){
			background: darkgoldenrod;
		}
		#box p:nth-of-type(3){
			background: darkcyan;
		}
		#box p:nth-of-type(4){
			background: darkmagenta;
		}
		#box p:nth-of-type(5){
			background: lightcoral;
		}
		#box p:nth-of-type(6){
			background: lightgreen;
		}
		#box p:nth-of-type(7){
			background: blueviolet;
		}
		#box p:nth-of-type(8){
			background: lightcyan;
		}
	</style>
</head>
<body>
	<div id="box">
		
		<p>男孩</p>
		<p>女孩</p>
		<p>老师</p>
		<p>天地</p>
		<p>朋友</p>
		<p>亲人</p>
		<p>孩子</p>
		<p>天地</p>
		<div id="center">
			我很好
		</div>
		
	</div>
	<script type="text/javascript">
//		点击让p显示
		var center = document.getElementById("center");
		var pList = document.getElementById("box").getElementsByTagName('p');
		
		
//		求出位置弧度
		var rad = 360 / pList.length * Math.PI / 180;
		
//		定义半径长
		var r = 200;
		
		var flag = true;
		
		center.onclick = function  () {
			if (flag) {
				//			循环每个p让他们的定位位置平均分布
			for (var i=0;i<pList.length;i++) {
//				以y轴旋转
				pList[i].style.transform = 
				'rotateY(1080deg)';
//				让他们分别移动出来
				pList[i].style.transition = 'all 1s '+200 *i +'ms';
//				随机的位置坐标
				pList[i].style.left = Math.cos(rad*i)*r +250+'px';//x坐标
				pList[i].style.top = Math.sin(rad*i)*r+250+'px';
			}
			flag = false;
			}else{
//				再次点击让图片收回
				for (var g=0;g<pList.length;g++) {
//				以y轴旋转
				pList[g].style.transform = 
				'rotateX(0deg)';
//				alert(g);
//				让他们分别移动出来
				pList[g].style.transition = 'all 1s '+200 *g +'ms';	
					
//				让定位置成为原来的	
				pList[g].style.left = 250+'px';
				pList[g].style.top = 250+'px';	
				}
				
				flag = true;
			}

		}
		
		
	</script>
</body>
</html>